<html>
    <head>
        <title>VXP for PHP Test Page</title>
        <link type="text/css" rel="stylesheet" href="css/buttons.css"/>
        <link type="text/css" rel="stylesheet" href="css/style.css"/>
        <link type="text/css" rel="stylesheet" href="js/jquery-ui/jquery-ui-1.8.12.custom.css"/>
        <link type="text/css" rel="stylesheet" href="js/jquery-ui/layout-default-latest.css"/>
        <link type="text/css" rel="stylesheet" href="js/treeview/jquery.treeview.css"/>
        <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui/jquery-ui-1.8.12.custom.min.js"></script> 
        <script type="text/javascript" src="js/jquery-ui/jquery.layout-latest.js"></script>
        <script type="text/javascript" src="js/treeview/jquery.treeview.js"></script>
        <script type="text/javascript" src="js/xpath-strings.js"></script>
        <script type="text/javascript">
            function parseXPath(str,showerrors)
            {
                if ((typeof(str)=="undefined") || (!str.length))
                    return;

                if (typeof(showerrors)=="undefined")
                    showerrors=true;

                $("#message").css({"visibility":"hidden"});
                $("#result").hide();

                $.ajax({
                        url:"parse.php",
                        dataType:'json',
                        data:{
                                x:str
                             },
                        success:  function(result)
                                  {
                                    console.log(result);
                                    if (result.success==1)
                                    {
                                        $("#tabs").show();
                                        $("#result").show();
                                        $("#result-xpath1").html(result.xpath1).treeview();
                                        $("#result-xpath2").html(result.xpath2).treeview();
                                    }
                                    else
                                        if (showerrors)
                                            $("#message").html(result.message).css({"visibility":"visible"});
                                  }
                      });


            }

            $(document).ready(function()
            {
/*                $("#xpath1-panel").resizable();
                $("#result-xpath2").resizable();
*/
                $("#random").button({
                                        icons:{
                                                  primary:"ui-icon-circle-arrow-s"
                                              }
                                    }).click(function(){
                                           $('#xpath').val(getRandomXPathString());
                                           $("#parse").focus().click();
                                       });
                $("#tabs").tabs();
                $("#xpath").keyup(function(e)
                {
                    if (e.which==13)
                        $("#parse").focus().click();
                    else
                        parseXPath($(this).val(),false);

                    $(this).focus();
                });

                $("#layout").layout({
                                        west:   {
                                                    size:500
                                                }
                                    });
                $("#xpath").focus();

                $("#src").load("parse.phps");

            });
        </script>
    </head>
    <body>
        <div class="menu">
            <span><b>vxp</b>&nbsp;&nbsp;</span>
            <a href="http://php-vxp.googlecode.com" target="_blank">Project page</a>
            <a href="test.html">Tests</a>
            <a href="http://code.google.com/p/php-vxp/source/checkout" target="_blank">Download</a>
            <a href="http://code.google.com/p/php-vxp/source/browse" target="_blank">Source</a>
            <a href="http://vpetrov.neuroinfo.org/projects/vxp/api/files.html">Documentation</a>
        </div>
        <div class="main">
            <div class="xpath-query">
                <div>
                    <span>
                        <label for="xpath">XPath 1.0 Query:</label>
                        <span class='query-menu'>
                            <button id="random">Random</button>
                        </span>
                        <br/>
                        <input type="text" id="xpath" name="xpath" class="round-corners"/>
                    </span>
                    <button id="parse" class="awesome orange large" onclick="parseXPath($('#xpath').val());">Parse XPath!</button>
                </div>
            </div>
            <span id="message"></span>
            <div id="tabs">
                <ul>
                    <li><a href="#ast">Syntax Tree</a></li>
                    <li><a href="#src">Source Code</a></li>
                </ul>

                <div id='ast'>
                    <div id="layout">
                        <div class="ui-layout-west">
                                <span class="title">XPath 1.0</span>
                                <div id="result-xpath1"></div>
                        </div>
                        <div class="ui-layout-center">
                                <span class="title">XPath 2.1 compatible</span>&nbsp;<span>(see the <a href="http://www.w3.org/2010/02/qt-applets/xpath21/" target="_blank">W3C XPath 2.1 parser</a>)</span>
                            <div id="result-xpath2"></div>
                        </div>
                    </div>
                </div>

                <div id="src">
                    C ya
                </div>
            </div>
        </div>
    </body>
</html>
